<template>
  <div class="box">
    <div style="display: flex; justify-content: space-around;">
      <div class="left">
        <div class="canvas">
          <canvas id="canvas" width="100px" height="50px">
          </canvas>
        </div>
        <h1>当前每箱包材信息</h1>
        <div class="childBox">
          <div>
            <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
              <tr  v-for="(item,index) in line1CurrPackageList" :key="index">
                <td width="80%"  class="btbg font-center titfont" >{{item.packagName}}</td>
                <td class="btbg font-center titfont" >{{item.qty}}</td>
              </tr>
            </table>
          </div>
          <div class="floot">
            <div style="position: absolute; bottom: 20px; left: 20px">
              <span class="sumCount">总数:&nbsp;</span>
              <span class="sumCount">100</span>
            </div>
            <div style="position: absolute; bottom: 20px; right: 20px;">
              <span class="sumCount">剩余:&nbsp;</span>
              <span class="sumCount">100</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <h1>下次每箱包材信息</h1>
        <div class="childBox">
          <div>
            <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
              <tr v-for="(item,index) in line2CurrPackageList" :key="index">
                <td width="80%"  class="btbg font-center titfont" >{{item.packagName}}</td>
                <td class="btbg font-center titfont" >{{item.qty}}</td>
              </tr>
            </table>
          </div>
          <div class="floot">
            <div style="position: absolute; bottom: 20px;">
              <span class="sumCount">总数:&nbsp;</span>
              <span class="sumCount">100</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import webSocketFactory from '../../api/WebSocket'
import { getWebSocketUrl } from '../../const/PublicConfig.js'
export default {
  name: 'HomeView',
  mounted () {
    this.draw()
  },
  data () {
    return {
      line1CurrPackageList: [{
        packagName: '冰袋', qty: 2
      }, {
        packagName: '耗刀三件套', qty: 1
      }],
      line2CurrPackageList: [{
        packagName: '冰袋', qty: 2
      }, {
        packagName: '耗刀三件套', qty: 1
      }, {
        packagName: '优惠券1', qty: 1
      }],
      userInfo: {
        userId: '1', tenantId: 'tenant_id', name: 'longxiaonan'
      },
      serverHost: getWebSocketUrl()
    }
  },
  components: {
  },
  created () {
    this.opentSocketConnect()
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    opentSocketConnect () {
      // this.timer = setInterval(this.socketConnect, 60 * 1000)
      this.socketConnect()
    },
    getOnlineUser () {
      this.socket.send(JSON.stringify({ name: 'LINK_OPEN', data: this.userInfo.userId }))
    },
    socketConnect () {
      if (this.userInfo.userId !== undefined) {
        let connectPath = this.serverHost + this.userInfo.userId + '/' + this.userInfo.tenantId + '/' + this.userInfo.name
        console.log('connectPath', connectPath)
        this.socket = webSocketFactory.connect(connectPath)
        let that = this
        this.socket.onmessage(event => {
          // webSocketFactory.resetHeartCheck(this.userInfo.userId, this.socket)
          let respData = JSON.parse(event.data)
          console.log('接收到待处理数的推送', respData)
          if (respData.method === 'FLOW_NOTIFY') {
            let bzCode = respData.bzCode
            let msg = '<h4>类型：' + respData.type + '</h4>' +
              '<h6>业务单号：' + bzCode + '</h6>' +
              '<h6>内容：' + respData.content + '</h6>'
            this.showNotify({ title: respData.title, message: msg })
          } else if (respData.method === 'GET_TODO_NUM') { // 接收到待处理数的推送
            console.log(respData.data)
          } else if (respData.method === 'LINK_OPEN') {
            console.log('收到连接开启通知' + respData.data)
          }
        })
        this.socket.onopen(event => {
          webSocketFactory.startHeartCheck(that.userInfo.userId, that.socket)
          that.getOnlineUser()
        })
        this.socket.onclose(event => {
          console.log('WebSocket连接关闭, 发起重连')
          that.socketReConnect()
        })
        this.socket.onerror(event => {
          console.log('WebSocket连接异常, 发起重连')
          that.socketReConnect()
        })
      }
    },
    socketReConnect () {
      if (this.reConnectFlag) {
        return
      }
      let that = this
      this.reConnectFlag = true
      setTimeout(function () {
        console.log('开始重连')
        that.socketConnect()
        that.reConnectFlag = false
      }, 6000)
    },
    socketConnectClose () {
      this.socket.close()
    },
    showNotify ({ title, message }) {
      this.$notify({
        title: title,
        dangerouslyUseHTMLString: true,
        message: message
      })
    },
    draw () {
      const canvas = document.getElementById('canvas')
      if (canvas.getContext) {
        const ctx = canvas.getContext('2d')
        // 设置线性渐变linear gradient
        const linerGradient = ctx.createLinearGradient(100, 200, 500, 200)
        linerGradient.addColorStop(0.5, '#cc6677')
        // linerGradient.addColorStop(1, '#000')
        // 设置阴影
        ctx.shadowColor = 'orange'
        ctx.shadowBlur = 5
        ctx.shadowOffsetX = 2
        ctx.shadowOffsetY = 2

        ctx.font = 'bold italic 26px arial'
        ctx.fillStyle = linerGradient
        ctx.fillText(' 产 线 2 ', 0, 34)
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
  #canvas {
    box-shadow: 0 0 5px;
  }
  .title {
    // 要上下居中不能用height，需要用padding
    padding: 9px 0;
    background-color: #3dbaff;
    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bold;
    color: #255e95;
  }
  .box {
    width: auto;
    height: calc(98vh);;
    padding: 1rem 0;
    box-sizing: border-box;
    box-shadow: 0 0 10px #333;
    background: rgba(86, 240, 145, 0.5);
    no-repeat: center / cover;
    border-radius: 10px;
  }
  .left, .right {
    background-color: #3af08c;
    box-shadow: 0 2px 12px 0 rgba(28, 80, 246, 0.9);
    width: 50rem;
    height: 50.6rem;
    border-radius: 5px;
    border: blue 1px solid;
    position: relative;
    .canvas {
      position: absolute;
      top: 1rem;
      left: 1rem;
    }
    .childBox {
      .tabtop13 {
        margin-top: 5px;
        .font-center{ text-align:center}
        .btbg{background:#e9faff}
        .titfont {
          font-family: 微软雅黑;
          font-size: 46px;
          font-weight: bold;
          color: #255e95;
          background-color:#e9faff;
        }
      }
      .tabtop13 td{
        /*background-color:#ffffff;*/
        height:35px;
        line-height:150%;
      }
      .floot {
        display: flex;
        justify-content: space-around;
        font-family: 微软雅黑;
        font-size: 2.5rem;
        font-weight: bold;
        color: #f04442;
        /*background-color:#e9faff;*/
      }
    }
  }
  .right {
    width: 40rem;
    .childBox {
      .tabtop13 {
        margin-top: 5px;
        .font-center{ text-align:center}
        .btbg{background:#e9faff}
        .titfont {
          color: #93957e;
          background-color: #a8ffd5;
        }
      }
      .tabtop13 td{
        /*background-color:#ffffff;*/
        height:35px;
        line-height:150%;
      }
      .floot {
        display: flex;
        justify-content: space-around;
        font-family: 微软雅黑;
        font-size: 2.5rem;
        font-weight: bold;
        color: #957644;
        /*background-color:#e9faff;*/
      }
    }
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
